<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人民币和美元汇率换算</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	¥：<input type="number" v-model="rmb"><p>
    $：<input type="number" v-model="dollar"><p>
	{{rmb}}人民币={{dollar | formatNum}}美元
</div>
<script type="text/javascript">
var exam = new Vue({
	el:'#example',
	data:{
		rate : 6.8,
		rmb : 0,
		dollar : 0
	},
	watch : {
		rmb : function(val){
			this.dollar = val / this.rate;//获取美元的值
		},
		dollar : function(val){
			this.rmb = val * this.rate;//获取人民币的值
		}
	},
	filters : {
		formatNum : function(value){
			return value.toFixed(2);//保留两位小数
		}
	}
})
</script>
</body>
</html>